<!--
 * @Author: Ryan
 * @Date: 2022-12-08 12:06:25
 * @LastEditors: Ryan
 * @LastEditTime: 2022-12-08 17:53:09
 * @Description: 开发指南-开发示例
 * @FilePath: \vue-admin-system\src\views\develop\demo\index.vue
-->

<template>
  <div class="app-container">
    <div class="demo-container">
      <div class="block">
        <h2>添加接口</h2>
        <ul>
          <li>'src/api'目录下新建业务模块对应的API接口目录</li>
          <li>新建子模块api文件:xxxx.js</li>
          <li>在xxxx.js内定义业务接口</li>
        </ul>
        <code-editor
          :value="exampleValue"
          :display_language="false"
          font_size="14px"
          width="100%"
        />
        <el-divider />
      </div>

      <div class="block">
        <h2>配置菜单</h2>
        <ul>
          <li>'src/router/modules'目录下新建一级菜单目录</li>
          <li>新建菜单路由配置文件:index.js</li>
        </ul>
        <code-editor
          :value="menuValue"
          :display_language="false"
          font_size="14px"
          width="100%"
        />
        <el-divider />
      </div>

      <div class="block">
        <h2>新建页面</h2>
        <ul>
          <li>'src/views'目录下新建模块目录</li>
          <li>遵循vue-spa应用的规范创建对应的文件和子目录</li>
        </ul>
        <p>
          完整示例请参考菜单[组件功能]-[Table]-[综合Table]，目录：'src/views/example/table/complex-table'
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import CodeEditor from 'simple-code-editor'
export default {
  name: 'DevelopDemo',
  components: { CodeEditor },
  data() {
    return {
      exampleValue: `    import request from '@/utils/request'

    // 登录接口
    export function login(params) {
      return request({
        url: '/passport/login',
        method: 'get',
        params
      })
    }
      `,
      menuValue: `    import tableRouter from './table'
    import icons from './icons'

    import Layout from '@/layout'

    export default [
      {
        path: '/example',
        component: Layout,
        redirect: 'noRedirect',
        name: 'Example',
        meta: { title: '新建菜单', icon: 'el-icon-cpu', roles: ['develop'] },
        children: [
          tableRouter,
          icons,
        ]
      }
    ]
      `
    }
  }
}
</script>

<style scoped lang="scss">
.demo-container {
  // width: 870px;
  margin: 0 auto;
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  @media (max-width: 992px) {
    width: auto;
  }

  .block {
    h2 {
      padding-bottom: 20px;
    }

    h4 {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
}
</style>
